<template>
  <div>
    <q-dialog
      class="quota"
      v-model="lockDig"
      maximized
      flat
      ref="dialog"
      :position="'right'"
      @hide="hideDialog"
    >
      <div :class="fulls ? 'dialog_cardFull column' : 'dialog_card column'">
        <h5
          :class="
            fulls
              ? 'view_titleFull justify-between q-px-md'
              : 'view_title justify-between q-px-md'
          "
        >
          {{ title }}
          <q-btn dense outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <slot name="yq_dialog_body"></slot>
        </q-scroll-area>
        <div class="row justify-end q-pa-md bottom_btn">
          <q-btn
            class="btn_bottom"
            outline
            color="primary"
            label="关闭"
            v-close-popup
            unelevated
          />
          <q-btn
            v-if="bottomBtn"
            class="btn_bottom color-primary"
            color="primary"
            label="保存"
            unelevated
            type="submit"
            @click="saveData"
            v-permission="`${props.auth ? props.auth : route.path + ':edit'}`"
          />
        </div>
      </div>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue';
import emitter from '../eventbus';

const lockDig: any = computed({
  set(value: any) {
    emit('update:lockDialog', value);
  },
  get() {
    console.log('props.lockDialog', props.lockDialog);
    return props.lockDialog;
  },
});

const emit = defineEmits(['update:lockDialog']);
const route = useRoute();

interface Props {
  lockDialog: boolean;
  title: string;
  fulls?: boolean;
  bottomBtn?: boolean;
  auth?: any; //权限字段，是否展示保存按钮
}

const props = withDefaults(defineProps<Props>(), {
  fulls: false,
  bottomBtn: true,
  auth: '',
});
//传给兄弟组件的属性
const saveData = () => {
  // emit('saveData');
  emitter.emit('saveData');
};

const hideDialog = () => {
  console.log('关闭弹窗');
  emitter.off('saveData');
};
// {
//   form: {
//     type: Object,
//     redirect: true,
//     default: () => ({
//       roleName: '',
//       roleCode: '',
//       description: '',
//     }),
//   },
//   lockDialog: {
//     type: Boolean,
//     default: false,
//   },
// }
</script>

<style scoped lang="scss">
.btn_bottom {
  padding: 10px 35px;
  margin-left: 10px;
}
.bottom_btn {
  border-top: 1px solid #e0e0e0;
}
</style>
